<template>
	<!-- 所有评论 -->
	<view class="container">
		<headTitle title="评价" :bottomline="true"></headTitle>
		<view class="comment-filter flex-wrap bgfff">
			<view class="filter-item font28 color333" :class="{'active': active === 0}" @tap="selectAction(0)">全部</view>
			<view class="filter-item font28 color333" :class="{'active': item.active === active}" 
				v-for="(item, index) in filterData" :key="index" @tap="selectAction(index+1)">
				{{ item.name }}{{ handleNum(index+1) }}
			</view>
		</view>
		<view>
			<comment :comment="item" v-for="(item, index) in commentList" :key="index" @openPhoto="openPhoto" type="all" @like="like" :index="index"></comment>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<!-- 预览图片 -->
		<previewImg v-if="openImg" @close="close" :cureent="currentImg" :arr="arrImg"></previewImg>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title'
import comment from '@/components/comment'
import previewImg from '@/components/preview-img'
import uniLoadMore from '@/components/uni-load-more/uni-load-more'
export default {
	data() {
		return {
			filterData: [{
				name: '有图',
				active: 1,
			},{
				name: '好评',
				active: 2,
			},{
				name: '中评',
				active: 3,
			},{
				name: '差评',
				active: 4,
			}],
			active: 0, 
			pageNum: 1,
			loadingType: 'more', //加载更多状态
			commentList: [], // 全部评价
			count: {}, // 数量
			id: 0, // 商品id
			openImg: false, // 展示图片
			arrImg: [], // 图片数组
			currentImg: 0, // 当前选中图片
			toggleData: '', // 切换页面需要重新请求数据(记录token)
		}
	},
	onShow() {
		if(this.toggleData !== uni.getStorageSync('token')) {
			this.toggleData = uni.getStorageSync('token')
			if(this.id) { 
				this.pageNum = 1
				this.getData('refresh')
			}
		}
	},
	//加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getData()
	},
	onLoad(obj) {
		this.toggleData = uni.getStorageSync('token')
		this.id = obj.productId
		if(this.id) {
			this.getData('refresh')
		}
	},
	methods: {
		// 点赞或取消点赞
		like(flag, index) {
			let num = this.commentList[index].praise
			this.commentList[index].praise = flag ? num + 1 : num - 1
			this.commentList[index].isPraise = flag
		},
		// 打开图片
		openPhoto(img) {
			let num = 0
			this.arrImg = []
			this.commentList.map(item => {
				// 评论有图片
				if(item.images.length) {
					item.images.map(val => {
						if(img === val) {
							this.currentImg = num
						}
						++num
						this.arrImg.push({
							img: val,
							content: {
								name: item.memberName,
								attr: item.attr,
								text: item.consultContent,
							}
						})
					})
				}
			})
			this.openImg = true
		},
		// 关闭轮播图
		close(flag) {
			this.openImg = flag 
		},
		// 获取数据
		async getData(type = 'add') {
			// 没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'more'
			}
			
			let list = await Api.apiCall('get', Api.goods.getGoodAllComment, { 
				goodsId: this.id,
				inquireType: this.active,
				pageIndex: this.pageNum,
				pageSize: 10,
			})
			if(!list) return  
			this.count = list.count || {}
			let commentList = list.list.recordList
			if (type === 'refresh') {
				this.commentList = []
			}
			this.commentList = this.commentList.concat(commentList)
			
			// 判断是否有下一页数据
			this.loadingType = list.list.hasMore == 0 ? 'nomore' : 'more'
			if (type === 'refresh') {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			}
		},
		selectAction(num) {
			this.active = num
			this.pageNum = 1
			this.getData('refresh')
		},
		// 处理数量展示
		handleNum(index) {
			let num = 0
			switch(index) {
				case 1: 
					num = this.count.figure
					break;
				case 2: 
					num = this.count.goods
					break;
				case 3: 
					num = this.count.general
					break;
				case 4: 
					num = this.count.bad
					break;
			}
			return num ? `(${num})` : ''
		},
	},
	components: {
		headTitle,
		comment,
		uniLoadMore,
		previewImg,
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}
.comment-filter {
	padding: 30rpx 30rpx 0;
	border-bottom: 1rpx solid #eee;
}
.filter-item {
	border-radius: 25rpx;
	padding: 11rpx 35rpx;
	letter-spacing: 1rpx;
	background:rgba(200,71,57,0.09);
	margin: 0 16rpx 30rpx 0;
	&.active {
		background-color: #C84739;
		color: #fff;
	}
}
</style>
